<script setup lang="ts">
import { defineAsyncComponent, hydrateOnVisible } from 'vue';

defineOptions({
  name: 'SystemSetting',
});
const Theme = defineAsyncComponent({
  hydrate: hydrateOnVisible(),
  loader: () => import('./components/setting/Theme.vue'),
});
const Background = defineAsyncComponent({
  hydrate: hydrateOnVisible(),
  loader: () => import('./components/setting/Background.vue'),
});
const Fonts = defineAsyncComponent({
  hydrate: hydrateOnVisible(),
  loader: () => import('./components/setting/Font.vue'),
});
const Float = defineAsyncComponent({
  hydrate: hydrateOnVisible(),
  loader: () => import('./components/setting/Float.vue'),
});
const Color = defineAsyncComponent({
  hydrate: hydrateOnVisible(),
  loader: () => import('./components/setting/Color.vue'),
});
</script>

<template>
  <div class="wos-setting">
    <div class="groups">
      <div class="group">
        <p class="title">主题</p>
        <Theme />
      </div>
      <div class="group">
        <p class="title">背景</p>
        <Background />
      </div>
      <div class="group">
        <p class="title">配色</p>
        <Color />
      </div>
      <div class="group">
        <p class="title">字体</p>
        <Fonts />
      </div>
      <div class="group">
        <p class="title">图标</p>
        <Float />
      </div>
    </div>
  </div>
</template>

<style lang="scss">
@import url('./css/setting.scss');
</style>
